<template>
	<view class="wrap">
		<u-swiper 
			:list="swipers"
			border-radius="0rpx"
			height="350"
			mode="dot"
			@click="clickItem"
		></u-swiper>
	</view>
</template>

<script>
	import {mapActions} from 'vuex'
	export default {
		data() {
			return {
				swipers: [],
			}
		},
		methods: {
			...mapActions(['isInPage']),
			loadSwiper(){
				return this.$api.carousel.index({category: 'home'})
				.then(res=>{
					if(res.code == 1)
						this.swipers = res.data
				})
			},
			clickItem(index){
				let currentSwiper = this.swipers[index]
				this.$emit('clickItem',{item: currentSwiper})
				if(this.isInPage(currentSwiper.url)){
					this.$Router.push(currentSwiper.url)
				}else{
					this.$Router.pushTab(currentSwiper.url)
				}
			}
		},
		mounted() {
			this.loadSwiper()
		}
	}
</script>

<style lang="scss" scoped>
	.wrap {
		.u-indicator-item-dot{
			background-color: rgba(255, 255, 255, 0.4) !important;
		}
	}
</style>